<template>
  <div class="group-page">
    <header class="header">
      <!-- S 导航 -->
      <nav class="navbar navbar-default navbar-white navbar-fixed-top" role="navigation">
        <div class="container">
          <div class="navbar-header">
            <a href="/ask/"><h3 style="text-align: center">问答首页</h3></a>
          </div>
          <div class="collapse navbar-collapse" id="navbar-collapse">
            <ul class="nav navbar-nav">
              <li class=""><a href="/ask/">首页</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
              <li>
                <form
                  class="form-inline navbar-form search-form pt-1"
                  action="/ask/search.html"
                  method="get"
                >
                  <input
                    class="form-control"
                    name="q"
                    value=""
                    type="text"
                    id="searchinput"
                    placeholder="搜索问题、话题或文章"
                  />
                </form>
              </li>
              <li class="hidden-xs">
                <div class="py-3 px-2">
                  <a href="/addons/ask/question/post.html" class="btn btn-primary"
                    >提问</a
                  >
                </div>
              </li>
              <li class="dropdown navbar-userinfo">
                <a
                  href="/index/user/index.html"
                  class="dropdown-toggle"
                  data-toggle="dropdown"
                  >会员<span class="hidden-sm">中心</span> <b class="caret"></b
                ></a>
                <ul class="dropdown-menu">
                  <li>
                    <a href="/index/user/login.html"
                      ><i class="fa fa-sign-in fa-fw"></i> 登录</a
                    >
                  </li>
                  <li>
                    <a href="/index/user/register.html"
                      ><i class="fa fa-user-o fa-fw"></i> 注册</a
                    >
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </nav>
      <!-- E 导航 -->
    </header>
    <div class="container">
      <div class="row">
        <div class="col-xs-12">
          <h2 style="font-size: 18px">
            教师推荐
            <a
              href="/addons/ask/expert/post.html"
              class="btn btn-outline-primary pull-right btn-apply"
              ><i class="fa fa-id-card-o"></i> 申请教师认证</a
            >
          </h2>
          <div class="mb-3">
            这里展示的是由我们为你推荐的资深小伙伴，你可以向TA提问，快速解答你的问题。
          </div>
          <div class="category-list mb-2">
            <a href="?" class="btn btn-primary btn-labeled">
              <span class="btn-label"><i class="fa fa-home"></i></span>全部
            </a>
          </div>
          <div class="expert-list clearfix">
            <div class="thumbnail">
              <a href="/u/19809">
                <img
                  class="img-circle"
                  style="width: 80px; height: 80px; margin: 30px auto 10px auto"
                  src=""
                  alt="15074703968"
                  data-toggle="popover"
                  data-title="15074703968"
                  data-placement="auto right"
                  data-type="user"
                  data-id="19809"
                />
              </a>
              <div class="caption">
                <h4 class="text-center">
                  <a href="/u/19809" title="15074703968">15074703968</a>
                </h4>
                <p class="text-muted text-center" title="">认证专家</p>
                <p class="text-center">
                  <a
                    class="btn btn-primary btn-sm"
                    href="/addons/ask/question/post.html?user_id=19809"
                    >向TA提问</a
                  >
                </p>
              </div>
            </div>
          </div>
          <div class="pager text-center"></div>
        </div>
      </div>
    </div>

    <footer class="footer hidden-xs">
      <div class="container-fluid" id="footer">
        <p class="address">
          Copyright&nbsp;©&nbsp;2017-2020 All Rights Reserved 优优班--学霸训练营
          Copyrights
          <a href="https://beian.miit.gov.cn" target="_blank">粤ICP备20053482号-2</a>
        </p>
      </div>
    </footer>
    <div class="main_nav_bottom hidden-md hidden-sm hidden-lg">
      <nav class="navbar navbar-default navbar-fixed-bottom">
        <div class="container" align="center">
          <ul class="nav nav-tabs nav-tabs-justified">
            <div class="row" align="center">
              <div class="col-md-3 col-sm-2 col-xs-2" style="padding: 0" align="center">
                <li>
                  <a href="https://www.uuban.com"
                    ><img src="../assets/images/i_home.png" />首页</a
                  >
                </li>
              </div>
              <div class="col-md-3 col-sm-2 col-xs-2" align="center">
                <li>
                  <a href="https://www.uuban.com/index.php/index/index/chques.html"
                    ><img src="../assets/images/i_zujuan.png" />组卷</a
                  >
                </li>
              </div>
              <div class="col-md-3 col-sm-3 col-xs-3" align="center">
                <li>
                  <a href="https://www.uuban.com/index.php/index/index/zujuan.html"
                    ><img src="../assets/images/i_cart.png" />试题篮</a
                  >
                </li>
              </div>
              <div class="col-md-3 col-sm-2 col-xs-2" align="center">
                <li>
                  <a href="https://www.uuban.com/paperfile.html"
                    ><img src="../assets/images/i_paperfile.png" />试卷</a
                  >
                </li>
              </div>
              <div class="col-md-3 col-sm-2 col-xs-2" align="center">
                <li>
                  <a href="/u/20278"><img src="../assets/images/i_my.png" />我的</a>
                </li>
              </div>
            </div>
          </ul>
        </div>
      </nav>
    </div>

    <div class="floatbar" style="margin-top: -220px">
      <div class="floatbar-item floatbtn-item-top" style="display: none">
        <a href="javascript:" class="floatbar-btn backtotop">
          <i class="fa fa-chevron-up"></i>
          <p>
            回到<br />
            顶部
          </p>
        </a>
      </div>
    </div>
    <!--搜索模板-->
  </div>
</template>
<script>
function centent1SelectOnchang(obj, pgs) {
  // var val = "", staffs = [];
  var val = "";
  $.each($(obj).find("option:selected"), function (i, o) {
    val += $(o).attr("value") + ",";
    // staffs.push(val);
  });
  $("input[name='" + pgs + "']").val(val);
  // console.log(staffs)
}


  // if ("1" != "") {
    // layer.open({
    //   title: "申请答疑教师认证",
    //   area: ["400px", "640px"],
    //   type: 1,
    //   content: template("applytpl", {}),
    // });
  // }
  // $(document).on("click", ".btn-apply", function () {
  //   layer.open({
  //     title: "申请答疑教师认证",
  //     area: ["400px", "640px"],
  //     type: 1,
  //     content: template("applytpl", {}),
  //   });
  //   return false;
  // });
  // ASK.api.form("#apply-form", function (data, ret) {
  //   ASK.api.msg(ret.msg, "/ask/experts.html");
  //   return false;
  // });

</script>
<style scoped>
@media (max-width: 480px) {
  .expert-list {
    margin: 0 -10px;
  }

  .expert-list .thumbnail {
    width: 44%;
    margin: 5px 10px;
  }
}

.category-list .tag {
  border-radius: 3px;
}
.btn-label {
  position: relative;
  left: -12px;
  display: inline-block;
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 3px 0 0 3px;
}
.btn-labeled {
  padding-top: 0;
  padding-bottom: 0;
}
.category-list .btn {
  margin-bottom: 10px;
  margin-right: 10px;
}
.btn-light .btn-label {
  background: #0076ff;
  color: #fff;
}
.nav-tabs {
  text-align: center;
  height: 30px;
  line-height: 30px;
}
.nav-tabs img {
  width: 20px;
  margin: 10px 0 0 0;
  display: block;
}
</style>
